.sidebar-clay-site {
	background-color: $bg-color;
	border-right: 1px solid $brand-light;

	a {
		@include focus-a11y;
	}

	.sidebar-header {
		.sidebar-logo {
			.sidebar-logo-image {
				max-height: 32px;
			}

			.c-inner {
				margin: -0.5rem;
			}
		}

		@media (min-width: $grid-float-breakpoint) {
			padding: $base-size * 1.33 $base-size $base-size * 2.4 $base-size *
				0.33;
		}

		@media (max-width: $grid-float-breakpoint - 1) {
			display: none;
		}
	}

	.sidebar-toggler {
		.c-inner {
			margin: -0.3125rem -0.5625rem;
		}
	}

	.sidebar-body {
		overflow: visible;
	}

	.nav-nested-margins > li .nav > li {
		margin-left: 12px;
	}

	.nav-heading {
		&:not(.active) > ul {
			display: none;
		}

		> .nav-link {
			font-weight: 600;
			padding-right: 2rem;

			> .c-inner {
				margin-right: -2rem;
			}
		}
	}

	.nav-link {
		border-radius: 6px;
		color: $brand-secondary;
		line-height: 1;
		margin-bottom: 2px;

		&:hover {
			background-color: $brand-dark-lighter;
		}

		.collapse-toggle {
			display: inline-block;
			height: 24px;
			margin-top: -12px;
			min-height: auto;
			position: absolute;
			right: 8px;
			top: 50%;
			transform: rotate(0);
			transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			width: 24px;
		}
	}

	.draft {
		display: none;
	}

	.active {
		&:not(.nav-heading) > .nav-link {
			color: $brand-dark;
			font-weight: 600;
		}

		> .nav-link .collapse-toggle {
			transform: rotate(90deg);
		}
	}

	.parent-page-active > .nav-link {
		color: $brand-dark;
	}
}
